<template>
  <div class="background">
    <div class="d_f j_c_s_b">
      <div>新建合作机构</div>
      <el-icon @click="cancellation">
        <CloseBold />
      </el-icon>
    </div>
    <div class="show"></div>
    <div class="auto">
      <myform :fields="fields" :model="model" :rules="rules" class="m_t_16" ref="ruleFrom" :options="options">
        <template v-slot:area>
          <el-cascader collapse-tags v-model="area" :options="districts" :props="props" />
        </template>
      </myform>
      <div class="box d_f a_i_c">
        <div class="tips"></div>
        <span class="size ">合作业务（多选）</span>
      </div>
      <div class="box m_t_5">
        <div class="d_f">
          <div class="width">
            <div>融资批量</div>
            <el-checkbox-group v-model="checkList1">
              <el-checkbox v-for="(item, index) in arr2" :key="index" @change="change1" :label="item.name"
                :value="item.id" />
            </el-checkbox-group>
          </div>
          <div class="line"></div>
          <div class="width m_l_20">
            <div>融资单笔</div>
            <el-checkbox-group v-model="checkList2">
              <el-checkbox v-for="(item, index) in arr1" :key="index" @change="change2" :label="item.name"
                :value="item.id" />
            </el-checkbox-group>
          </div>
        </div>
        <div class="d_f m_t_20">
          <div class="width">
            <div>非融批量</div>
            <el-checkbox-group v-model="checkList3">
              <el-checkbox v-for="(item, index) in arr4" :key="index" @change="change3" :label="item.name"
                :value="item.id" />
            </el-checkbox-group>
          </div>
          <div class="line"></div>
          <div class="width m_l_20">
            <div>非融单笔</div>
            <el-checkbox-group v-model="checkList4">
              <el-checkbox v-for="(item, index) in arr3" :key="index" @change="change4" :label="item.name"
                :value="item.id" />
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in checkArr1" :key="index">
        <div class="box d_f a_i_c m_t_20">
          <div class="tips"></div>
          <span class="size ">“{{ item.name }}”合作详情</span>
        </div>
        <div class="box m_t_5 addForm">
          <div class="d_f">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="input_wid label">起始日期</div>
              <div class="input_wid vw  label">截止日期</div>
              <div class="input_wid vw  label ">合作额度</div>
              <div class="input_wid  vw label">使用额度</div>
              <div class="input_wid  vw label">剩余额度</div>
              <div class="input_wid  vw label">锁定金额</div>
              <div class="input_wid  vw label">分责比例</div>
            </div>
          </div>
          <div v-for="(item1, index1) in item.children" :key="index1" class="m_t_10">
            <div class="d_f">
              <div class="label_wid">合作{{ index1 + 1 }}</div>
              <div class="d_f" style="width: calc(92% - 1vw);">
                <div class="input_wid">
                  <el-date-picker v-model="item1.beginDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDates" format="YYYY-MM-DD" @focus="focus('checkArr1', index, index1)"
                    placeholder="请选择起始日期" />
                </div>
                <div class="input_wid vw">
                  <el-date-picker v-model="item1.finishDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDatesEnd" format="YYYY-MM-DD" @focus="focus('checkArr1', index, index1)"
                    placeholder="请选择截止日期" />
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.amountLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入合作额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.spendingLimit"  oninput="value=value.replace(/[^0-9.]/g,'')"  type="number" placeholder="请输入使用额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
             
                <div class="input_wid vw">
                  <el-input v-model="item1.balanceLimit" type="number" oninput="value=value.replace(/[^0-9.]/g,'')" placeholder="请输入剩余额度 " @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.lockMoney" :disabled="true"  oninput="value=value.replace(/[^0-9.]/g,'')"  type="number" placeholder="请输入锁定金额" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.liability" maxlength="6" oninput="value=value.replace(/[^0-9.]/g,'')"  placeholder="请输入分责比例" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">%</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-button type="primary" class="upload "  plain
                    @click="uploadFile('checkArr1', index, index1)">上传相关合同证明</el-button>
                </div>
              </div>
              <div class="icon_wid ">
                <img src="../../../assets/reduce.png" alt="" class="icon" @click="reduceForm1(index, index1)">
              </div>
            </div>

          </div>
          <div class="d_f m_t_10">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="name_wid"></div>
              <div class="name_wid vw"></div>
            </div>
            <div class="icon_wid ">
              <img src="../../../assets/add.png" alt="" class="icon" @click="addForm1(item, index)">
            </div>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in checkArr2" :key="index">
        <div class="box d_f a_i_c m_t_20">
          <div class="tips"></div>
          <span class="size ">“{{ item.name }}”合作详情</span>
        </div>
        <div class="box m_t_5 addForm">
          <div class="d_f">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="input_wid label">起始日期</div>
              <div class="input_wid vw  label">截止日期</div>
              <div class="input_wid vw  label ">合作额度</div>
              <div class="input_wid  vw label">使用额度</div>
              <div class="input_wid  vw label">剩余额度</div>
              <div class="input_wid  vw label">锁定金额</div>
              <div class="input_wid  vw label">分责比例</div>
            </div>
          </div>
          <div v-for="(item1, index1) in item.children" :key="index1" class="m_t_10">
            <div class="d_f">
              <div class="label_wid">合作{{ index1 + 1 }}</div>
              <div class="d_f" style="width: calc(92% - 1vw);">
                <div class="input_wid">
                  <el-date-picker v-model="item1.beginDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDates" format="YYYY-MM-DD" @focus="focus('checkArr2', index, index1)"
                    placeholder="请选择起始日期" />
                </div>
                <div class="input_wid vw">
                  <el-date-picker v-model="item1.finishDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDatesEnd" format="YYYY-MM-DD" @focus="focus('checkArr2', index, index1)"
                    placeholder="请选择截止日期" />
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.amountLimit" type="number" oninput="item1.amountLimit=item1.amountLimit.replace(/[^0-9.]/g,'')"  placeholder="请输入合作额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.spendingLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入使用额度"
                    @keydown.native.up.prevent @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.balanceLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入剩余额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.lockMoney" :disabled="true"   oninput="value=value.replace(/[^0-9.]/g,'')"  type="number" placeholder="请输入锁定金额" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.liability" oninput="value=value.replace(/[^0-9.]/g,'')"  maxlength="6" placeholder="请输入分责比例" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">%</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-button type="primary" class="upload "  plain
                    @click="uploadFile('checkArr2', index, index1)">上传相关合同证明</el-button>
                </div>
              </div>
              <div class="icon_wid ">
                <img src="../../../assets/reduce.png" alt="" class="icon" @click="reduceForm2(index, index1)">
              </div>
            </div>

          </div>
          <div class="d_f m_t_10">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="name_wid"></div>
              <div class="name_wid vw"></div>
            </div>
            <div class="icon_wid ">
              <img src="../../../assets/add.png" alt="" class="icon" @click="addForm2(item, index)">
            </div>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in checkArr3" :key="index">
        <div class="box d_f a_i_c m_t_20">
          <div class="tips"></div>
          <span class="size ">“{{ item.name }}”合作详情</span>
        </div>
        <div class="box m_t_5 addForm">
          <div class="d_f">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="input_wid label">起始日期</div>
              <div class="input_wid vw  label">截止日期</div>
              <div class="input_wid vw  label ">合作额度</div>
              <div class="input_wid  vw label">使用额度</div>
              <div class="input_wid  vw label">剩余额度</div>
              <div class="input_wid  vw label">锁定金额</div>
              <div class="input_wid  vw label">分责比例</div>
            </div>
          </div>
          <div v-for="(item1, index1) in item.children" :key="index1" class="m_t_10">
            <div class="d_f">
              <div class="label_wid">合作{{ index1 + 1 }}</div>
              <div class="d_f" style="width: calc(92% - 1vw);">
                <div class="input_wid">
                  <el-date-picker v-model="item1.beginDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDates" format="YYYY-MM-DD" @focus="focus('checkArr3', index, index1)"
                    placeholder="请选择起始日期" />
                </div>
                <div class="input_wid vw">
                  <el-date-picker v-model="item1.finishDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDatesEnd" format="YYYY-MM-DD" @focus="focus('checkArr3', index, index1)"
                    placeholder="请选择截止日期" />
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.amountLimit" type="number" placeholder="请输入合作额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.spendingLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入使用额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.balanceLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入剩余额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.lockMoney" :disabled="true"   oninput="value=value.replace(/[^0-9.]/g,'')"  type="number" placeholder="请输入锁定金额" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.liability" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="6" placeholder="请输入分责比例" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">%</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-button type="primary" class="upload "  plain
                    @click="uploadFile('checkArr3', index, index1)">上传相关合同证明</el-button>
                </div>
              </div>
              <div class="icon_wid ">
                <img src="../../../assets/reduce.png" alt="" class="icon" @click="reduceForm3(index, index1)">
              </div>
            </div>

          </div>
          <div class="d_f m_t_10">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="name_wid"></div>
              <div class="name_wid vw"></div>
            </div>
            <div class="icon_wid ">
              <img src="../../../assets/add.png" alt="" class="icon" @click="addForm3(item, index)">
            </div>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in checkArr4" :key="index">
        <div class="box d_f a_i_c m_t_20">
          <div class="tips"></div>
          <span class="size ">“{{ item.name }}”合作详情</span>
        </div>
        <div class="box m_t_5 addForm">
          <div class="d_f">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="input_wid label">起始日期</div>
              <div class="input_wid vw  label">截止日期</div>
              <div class="input_wid vw  label ">合作额度</div>
              <div class="input_wid  vw label">使用额度</div>
              <div class="input_wid  vw label">剩余额度</div>
              <div class="input_wid  vw label">锁定金额</div>
              <div class="input_wid  vw label">分责比例</div>
            </div>
          </div>
          <div v-for="(item1, index1) in item.children" :key="index1" class="m_t_10">
            <div class="d_f">
              <div class="label_wid">合作{{ index1 + 1 }}</div>
              <div class="d_f" style="width: calc(92% - 1vw);">
                <div class="input_wid">
                  <el-date-picker v-model="item1.beginDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDates" format="YYYY-MM-DD" @focus="focus('checkArr4', index, index1)"
                    placeholder="请选择起始日期" />
                </div>
                <div class="input_wid vw">
                  <el-date-picker v-model="item1.finishDate" clearable type="date" value-format="YYYY-MM-DD"
                    :disabled-date="disabledDatesEnd" format="YYYY-MM-DD" @focus="focus('checkArr4', index, index1)"
                    placeholder="请选择截止日期" />
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.amountLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入合作额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.spendingLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入使用额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.balanceLimit" oninput="value=value.replace(/[^0-9.]/g,'')" type="number" placeholder="请输入剩余额度" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.lockMoney" :disabled="true"   oninput="value=value.replace(/[^0-9.]/g,'')"  type="number" placeholder="请输入锁定金额" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">元</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-input v-model="item1.liability" oninput="value=value.replace(/[^0-9.]/g,'')" maxlength="6" placeholder="请输入分责比例" @keydown.native.up.prevent
                    @keydown.native.down.prevent @keydown.native.tab.prevent>
                    <template #suffix>
                      <span class="suffix">
                        <span class="unit">%</span>
                      </span>
                    </template>
                  </el-input>
                </div>
                <div class="input_wid vw">
                  <el-button type="primary" class="upload " plain
                    @click="uploadFile('checkArr4', index, index1)">上传相关合同证明</el-button>
                </div>
              </div>
              <div class="icon_wid ">
                <img src="../../../assets/reduce.png" alt="" class="icon" @click="reduceForm4(index, index1)">
              </div>
            </div>

          </div>
          <div class="d_f m_t_10">
            <div class="label_wid"></div>
            <div class="d_f" style="width: calc(92% - 1vw);">
              <div class="name_wid"></div>
              <div class="name_wid vw"></div>
            </div>
            <div class="icon_wid ">
              <img src="../../../assets/add.png" alt="" class="icon" @click="addForm4(item, index)">
            </div>
          </div>
        </div>
      </div>
      <div class="box d_f a_i_c m_t_20">
        <div class="tips"></div>
        <span class="size ">添加支行</span>
      </div>
      <div class="box m_t_5">
        <div class="d_f">
          <div class="label_wid"></div>
          <div class="d_f" style="width: calc(92% - 1vw);">
            <div class="name_wid bank">银行名称</div>
            <div class="name_wid vw">所在盟市/旗县</div>
          </div>
        </div>
        <div v-for="(item, index) in model.branch" :key="index" class="d_f a_i_c m_t_10">
          <div class="label_wid">银行{{ index + 1 }}</div>
          <div class="d_f" style="width: calc(92% - 1vw);">
            <div class="name_wid">
              <el-input v-model="item.name" placeholder="请输入银行名称"></el-input>
            </div>
            <div class="name_wid vw">
              <el-cascader v-model="item.area" collapse-tags placeholder="请选择盟市/旗县" :options="districts" :props="bankProps" />
            </div>
          </div>
          <div class="icon_wid ">
            <img src="../../../assets/reduce.png" alt="" class="icon" @click="reduce(index)">
          </div>
        </div>
        <div class="d_f m_t_10">
          <div class="label_wid"></div>
          <div class="d_f" style="width: calc(92% - 1vw);">
            <div class="name_wid"></div>
            <div class="name_wid vw"></div>
          </div>
          <div class="icon_wid ">
            <img src="../../../assets/add.png" alt="" class="icon" @click="addBank">
          </div>
        </div>
      </div>
    </div>
    <div class="show"></div>
    <div class="bottom d_f j_c_s_b">
      <div></div>
      <div>
        <el-button type="primary" @click="save" v-myRepeat>确定</el-button>
        <el-button @click="cancellation">取消</el-button>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="上传相关合作证明" width="500" :before-close="handleClose">
      <el-upload class="upload-demo" drag :action="action" v-model:file-list="fileList" :on-remove="handleRemove"
        :on-success="onSuccess" multiple :headers="headers">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或 <em>点击上传</em>
        </div>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { CloseBold } from '@element-plus/icons-vue'
import { copy } from '../../../utils/date'
import { productListAll, cooperativeAgencyAdd } from '../../../api/system/institution'
import { institutionAddType } from '../../../type/system'
import { Upload, UploadFilled } from '@element-plus/icons-vue'
import { httpConfig } from '../../../utils/config'
import { Message } from '../../../utils/resetMessage'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const model = {
  name: '',//机构全称
  shortName: '',//机构简称
  status: '',//合作状态：0-未合作，1-已合作
  area: [],
  project: [],
  branch: [
    {
      agencyId: 0,
      name: '',
      area: [],
    }
  ]
}
export default defineComponent({
  name: '',
  components: {
    CloseBold, UploadFilled
  },
  setup() {
    const data: institutionAddType = reactive({
      fields: [
        {
          label: "机构全称",
          prop: 'name',
          placeholder: '请输入机构全称',
          type: 'input',
          labelWidth: '96px'
        },
        {
          label: "机构简称",
          prop: 'shortName',
          placeholder: '请输入机构简称',
          type: 'input',
          labelWidth: '96px'
        },
        {
          label: "合作状态",
          prop: 'status',
          placeholder: '请选择合作状态',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          label: "盟市/旗县",
          prop: 'area',
        },
      ],
      props: {
        multiple: true,
        value: 'name',
        label: 'name',
        children: 'districts',
        checkStrictly: false
      },
      bankProps: {
        multiple: true,
        value: 'name',
        label: 'name',
        children: 'districts'
      },
      districts: [],
      options: {
        status: [
          {
            name: '未合作',
            id: '0'
          },
          {
            name: '已合作',
            id: '1'
          }
        ],
      },
      model: copy(model),
      arr1: [],
      arr2: [],
      arr3: [],
      arr4: [],
      checkList1: [],
      checkList2: [],
      checkList3: [],
      checkList4: [],
      checkArr1: [],
      checkArr2: [],
      checkArr3: [],
      checkArr4: [],
      area: [],
      dialogVisible: false,
      name: '',
      index: 0,
      index1: 0,
      action: httpConfig.upload,
      headers: {
        token: localStorage.getItem('Token')
      },
      fileList: [],
      rules: {
        name: [
          { required: true, message: '请输入机构全称', trigger: 'blur' },
        ],
        shortName: [
          { required: true, message: '请输入机构简称', trigger: 'blur' },
        ],
        status: [
          { required: true, message: '请选择合作状态', trigger: 'blur' },
        ],
        area: [
          { required: true, message: '请选择地区', trigger: 'blur' },
        ],
      }
    })
    const ruleFrom = ref()
    const router = useRouter()
    onBeforeMount(() => {
      data.districts = JSON.parse(<string>localStorage.getItem('districts'))
      methods.getData()
    })
    const methods = {
      getData() {
        productListAll({}).then((res: any) => {

          res.map((item: any) => {
            item.children = [{
              agencyId: 0,//机构ID
              productId: item.id,//产品ID
              name: item.name,//产品名称
              beginDate: '',//起始日期
              finishDate: '',//截止日期
              amountLimit: '',//总额度
              spendingLimit: '',//使用额度
              balanceLimit: '',//剩余额度
              lockMoney:'0',
              liability: '',//分责比例
              cooperationDoc: '',//合作证明文件url
              file: [],
            }]
          })
          data.arr1 = res.filter((item: any) => {
            return item.category == 1
          })
          data.arr2 = res.filter((item: any) => {
            return item.category == 2
          })
          data.arr3 = res.filter((item: any) => {
            return item.category == 3
          })
          data.arr4 = res.filter((item: any) => {
            return item.category == 4
          })
        })
      },
      addBank() {
        data.model.branch.push({
          agencyId: 0,
          name: '',
          area: [],
        })
      },
      handleInput(value) {
        const regex = /^[1-9]\d*$/;
        if (!regex.test(value)) {
          value = ''
        }
      },
      reduce(index: number) {
        data.model.branch.splice(index, 1)
      },
      change1(e: boolean) {
        let arr: any = []
        if (e) {
          data.arr2.map((item: any) => {
            if (data.checkList1.some((item1: any) => item.id == item1)) {
              arr.push(item)
            }
          })
          if (data.checkArr1.length > 0) {
            let diff = arr.filter((a1: any) => !data.checkArr1.some((a2: any) => a1.id === a2.id));
            data.checkArr1 = data.checkArr1.concat(diff)
          } else {
            data.checkArr1 = arr
          }
        } else {
          if (data.checkList1.length > 0) {
            data.checkArr1 = data.checkArr1.filter((a1: any) => data.checkList1.some((a2: any) => a1.id === a2));
          } else {
            data.checkArr1 = []
          }
        }
      },
      change2(e: boolean) {
        let arr: any = []
        if (e) {
          data.arr1.map((item: any) => {
            if (data.checkList2.some((item1: any) => item.id == item1)) {
              arr.push(item)
            }
          })
          if (data.checkArr2.length > 0) {
            let diff = arr.filter((a1: any) => !data.checkArr2.some((a2: any) => a1.id === a2.id));
            data.checkArr2 = data.checkArr2.concat(diff)
          } else {
            data.checkArr2 = arr
          }
        } else {
          if (data.checkList2.length > 0) {
            data.checkArr2 = data.checkArr2.filter((a1: any) => data.checkList2.some((a2: any) => a1.id === a2));
          } else {
            data.checkArr2 = []
          }
        }
      },
      change3(e: boolean) {
        let arr: any = []
        if (e) {
          data.arr4.map((item: any) => {
            if (data.checkList3.some((item1: any) => item.id == item1)) {
              arr.push(item)
            }
          })
          if (data.checkArr3.length > 0) {
            let diff = arr.filter((a1: any) => !data.checkArr3.some((a2: any) => a1.id === a2.id));
            data.checkArr3 = data.checkArr3.concat(diff)
          } else {
            data.checkArr3 = arr
          }
        } else {
          if (data.checkList3.length > 0) {
            data.checkArr3 = data.checkArr3.filter((a1: any) => data.checkList3.some((a2: any) => a1.id === a2));
          } else {
            data.checkArr3 = []
          }
        }
      },
      change4(e: boolean) {
        let arr: any = []
        if (e) {
          data.arr3.map((item: any) => {
            if (data.checkList4.some((item1: any) => item.id == item1)) {
              arr.push(item)
            }
          })
          if (data.checkArr4.length > 0) {
            let diff = arr.filter((a1: any) => !data.checkArr4.some((a2: any) => a1.id === a2.id));
            data.checkArr4 = data.checkArr4.concat(diff)
          } else {
            data.checkArr4 = arr
          }
        } else {
          if (data.checkList4.length > 0) {
            data.checkArr4 = data.checkArr4.filter((a1: any) => data.checkList4.some((a2: any) => a1.id === a2));
          } else {
            data.checkArr4 = []
          }
        }
      },
      //添加form表单
      addForm1(item: any, index: number) {
        data.checkArr1[index].children.push({
          agencyId: 0,//机构ID
          productId: item.id,//产品ID
          name: item.name,//产品名称
          beginDate: '',//起始日期
          finishDate: '',//截止日期
          amountLimit: '',//总额度
          spendingLimit: '',//使用额度
          balanceLimit: '',//剩余额度
          lockMoney:'0',
          liability: '',//分责比例
          cooperationDoc: '',//合作证明文件url
          file: [],
        })
      },
      reduceForm1(index: number, index1: number) {
        data.checkArr1[index].children.splice(index1, 1)
      },
      //添加form表单
      addForm2(item: any, index: number) {
        data.checkArr2[index].children.push({
          agencyId: 0,//机构ID
          productId: item.id,//产品ID
          name: item.name,//产品名称
          beginDate: '',//起始日期
          finishDate: '',//截止日期
          amountLimit: '',//总额度
          spendingLimit: '',//使用额度
          balanceLimit: '',//剩余额度
          lockMoney:'0',
          liability: '',//分责比例
          cooperationDoc: '',//合作证明文件url
          file: [],
        })
      },
      reduceForm2(index: number, index1: number) {
        data.checkArr2[index].children.splice(index1, 1)
      },
      //添加form表单
      addForm3(item: any, index: number) {
        data.checkArr3[index].children.push({
          agencyId: 0,//机构ID
          productId: item.id,//产品ID
          name: item.name,//产品名称
          beginDate: '',//起始日期
          finishDate: '',//截止日期
          amountLimit: '',//总额度
          spendingLimit: '',//使用额度
          balanceLimit: '',//剩余额度
          lockMoney:'0',
          liability: '',//分责比例
          cooperationDoc: '',//合作证明文件url
          file: [],
        })
      },
      reduceForm3(index: number, index1: number) {
        data.checkArr3[index].children.splice(index1, 1)
      },
      //添加form表单
      addForm4(item: any, index: number) {
        data.checkArr4[index].children.push({
          agencyId: 0,//机构ID
          productId: item.id,//产品ID
          name: item.name,//产品名称
          beginDate: '',//起始日期
          finishDate: '',//截止日期
          amountLimit: '',//总额度
          spendingLimit: '',//使用额度
          balanceLimit: '',//剩余额度
          lockMoney:'0',
          liability: '',//分责比例
          cooperationDoc: '',//合作证明文件url
          file: [],
        })
      },
      reduceForm4(index: number, index1: number) {
        data.checkArr4[index].children.splice(index1, 1)
      },
      //上传文件
      uploadFile(name: string, index: number, index1: number) {
        data.name = name
        data.index = index
        data.index1 = index1
        data.fileList = data[name][index].children[index1].file
        data.dialogVisible = true
      },
      onSuccess(src: any, file: any) {
        if (src.code == '000000') {
          data[data.name][data.index].children[data.index1].file.push({ name: src.data, uid: file.uid })
        } else {
          Message({ type: 'error', message: src.msg })
        }
      },
      handleRemove(file: any) {
        const index = data[data.name][data.index].children[data.index1].file.findIndex((item: any) => item.uid == file.uid);
        data[data.name][data.index].children[data.index1].file.splice(index, 1)
      },
      handleClose() {
        data.dialogVisible = false
        data.fileList = []
      },
      //保存按钮
      save() {
        data.model.area = data.area
        ruleFrom.value.verification().then((res: Boolean) => {
          let arr = data.checkArr1.concat(data.checkArr2).concat(data.checkArr3).concat(data.checkArr4)
          if (arr.length == 0) {
            Message({ type: 'error', message: '请选择合作业务' })
            return
          }
          let list: any = []
          arr.map((item: any) => {
            item.children.map((item1: any) => {
              list.push(item1)
            })
          })
          if (list.some((item: any) => !item.beginDate)) {
            Message({ type: 'error', message: '请选择起始日期' })
            return
          }
          if (list.some((item: any) => !item.finishDate)) {
            Message({ type: 'error', message: '请选择结束日期' })
            return
          }
          if (list.some((item: any) => !item.amountLimit)) {
            Message({ type: 'error', message: '请输入合同额度' })
            return
          }
          if (list.some((item: any) => item.spendingLimit == '')) {
            Message({ type: 'error', message: '请输入使用额度' })
            return
          }
          if (list.some((item: any) => !item.balanceLimit)) {
            Message({ type: 'error', message: '请输入剩余额度' })
            return
          }
          // if (list.some((item: any) => !item.lockMoney)) {
          //   Message({ type: 'error', message: '请输入锁定金额' })
          //   return
          // }
          
          if (list.some((item: any) => !item.liability)) {
            Message({ type: 'error', message: '请输入分责比例' })
            return
          }
          if (data.model.branch.some((item: any) => !item.name)) {
            Message({ type: 'error', message: '请输入银行名称' })
            return
          }
          list.map((item: any) => {
            let file = item.file.map((item: any) => {
              return item.name
            })
            item.cooperationDoc = file.join(',')
          })
          let name=''
         list.map((item:any)=>{
           if(Number(item.lockMoney)+Number(item.balanceLimit)+Number(item.spendingLimit)!=Number(item.amountLimit)){
          name =`${item.name}:锁定金额+剩余额度+使用额度必须等于合作额度`
           }
         })
         if(name)return Message({ type: 'error', message: name })
          data.model.project = list

          cooperativeAgencyAdd(data.model).then((res: any) => {
            Message({ type: 'success', message: '新增成功' })
            router.push('/system/institution/index')
          })
        })
      },
      //时间选择器获取焦点拿到数组的下标
      focus(name: string, index: number, index1: number) {
        data.name = name
        data.index = index
        data.index1 = index1
      },
      //根据结束时间判断开始时间能不能选择
      disabledDates(time: any) {
        if (data.name && data[data.name][data.index].children[data.index1].finishDate) {
          const maxDate = data[data.name][data.index].children[data.index1].finishDate
          return time.getTime() > new Date(maxDate).getTime();
        } else {
          return false
        }
      },
      //根据开始时间判断结束时间能不能选择
      disabledDatesEnd(time: any) {
        if (data.name && data[data.name][data.index].children[data.index1].beginDate) {
          const maxDate = data[data.name][data.index].children[data.index1].beginDate
          return time.getTime() < new Date(maxDate).getTime() - 8.64e7;
        } else {
          return false
        }
      },
      //取消按钮，并关闭弹窗
      cancellation() {
        ElMessageBox.confirm(
          '当前信息将不再保存?',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
          .then(() => {
            router.push('/system/institution/index')
          })
      }
    }
    return {
      ...toRefs(data),
      ...methods, Upload,
      ruleFrom
    }
  }
})
</script>
<style scoped lang='scss'>
.background {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  background: #fff;
  border-radius: 6px;
  padding: 16px;
}

.show {
  width: 100%;
  height: 1px;
  background: #E7E7E7;
  margin-top: 16px;
}

.auto {
  width: 100%;
  height: calc(100% - 120px);
  overflow-y: auto
}

.box {
  width: calc(100% - 80px);
  padding: 12px 24px;
  background: rgba(24, 120, 255, 0.05);
  margin-left: 16px;
  border-radius: 6px 6px 0px 0px;

  .tips {
    background: #1878FF;
    width: 4px;
    height: 16px;
  }

  .size {
    color: rgba(0, 0, 0, 0.9);
    font-size: 15px;
    margin-left: 8px;
  }

  .width {
    width: calc(50% - 21px);
  }

  .line {
    width: 1px;
    height: 60px;
    background: #E3E8F0;
  }

  .label_wid {
    width: 5%;
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;

  }
 .bank::before{
  color: var(--el-color-danger);
    content: "*";
    margin-right: 4px;
 }
  .name_wid {
    width: calc(49% - 0.5vw);
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px;
  }

  .icon {
    width: 26px;
    height: 26px;
  }

  .icon_wid {
    width: 30px;
    cursor: pointer;
    margin-left: 2vw;
  }

  .input_wid {
    width: 11%;
  }

  .text {
    color: rgba(0, 0, 0, 0.4);
    font-size: 14px;
  }

  .formIcon {

    width: 26px;
    height: 26px;
  }

  .label {
    color: rgba(0, 0, 0, 0.9);
    font-size: 14px
  }

  .label::before {
    color: #f56c6c;
    content: "*";
    margin-right: 4px;
  }

  .vw {
    margin-left: 0.5vw;
  }
}

.bottom {
  margin-top: 32px;
}
</style>
<style lang="scss">
.name_wid {

  .el-input,
  .el-cascader {
    width: 100% !important;
  }
}

.input_wid {
  .el-input {
    width: 100% !important;
  }

}
</style>